<template>
    <qly-base-page :title="$t('common.salaryBreakdown')" ref="skyBasePageRef" type="data"
                   bg-page-color="#f5f5f5" padding="0">
        <template #header>
            <tr-card margin="12rpx 18rpx" padding="24rpx 24rpx 16rpx" borderRadius="12rpx">
                <view class="card-row row-between">
                    <view class="card-row date-box">
                        <view class="label">{{$t('common.dateRange')}}：</view>
                        <uni-datetime-picker v-model="datetimerange" type="daterange" rangeSeparator="至"/>
                    </view>
                </view>
                <up-gap height="1" bgColor="#f5f5f5" marginTop="12rpx" marginBottom="12rpx"></up-gap>
                <view class="card-row row-between">
                    <view class="label">{{$t('common.totalAmount')}}：</view>
                    <view class="value all-money red-text">456789.00</view>
                </view>
            </tr-card>
        </template>
        <view>
            <tr-card v-for="(item,index) in 10" :key="index" margin="12rpx 18rpx" borderRadius="12rpx">
                <view class="card-row row-between">
                    <view class="card-row">
                        <view class="label">{{$t('common.date')}}：</view>
                        <view class="value">2025-05-05</view>
                    </view>
                    <view class="card-row success-text">
                        <view class="label">{{$t('common.Total')}}：</view>
                        <view class="value">12</view>
                    </view>
                </view>
                <up-gap height="1" bgColor="#f5f5f5" marginTop="12rpx" marginBottom="12rpx"></up-gap>
                
                <view class="card-row row-between">
                    <view class="card-row">
                        <view class="label">{{$t('common.groupSalary')}}：</view>
                        <view class="value">12</view>
                    </view>
                    <view class="card-row">
                        <view class="label">{{$t('common.valuateRewards')}}：</view>
                        <view class="value">123</view>
                    </view>
                </view>
                <view class="card-row row-between">
                    <view class="card-row">
                        <view class="label">{{$t('common.advanceFunds')}}：</view>
                        <view class="value">12</view>
                    </view>
                    <view class="card-row">
                        <view class="label">{{$t('common.balance')}}：</view>
                        <view class="value">123</view>
                    </view>
                </view>
                <view class="card-row row-between">
                    <view class="card-row">
                        <view class="label">{{$t('common.invoiceAdvance')}}：</view>
                        <view class="value">12</view>
                    </view>
                    <view class="card-row">
                        <view class="label">{{$t('common.placeOrder')}}：</view>
                        <view class="value">123</view>
                    </view>
                </view>
                <view class="card-row row-between">
                    <view class="card-row">
                        <view class="label">{{$t('common.additionalSubsidies')}}：</view>
                        <view class="value">12</view>
                    </view>
                </view>
            </tr-card>
        </view>
    </qly-base-page>
</template>
<script setup>

const datetimerange = ref()
const searchRef = ref()
const params = ref({
    status: '',
    myPublishFlag: true,
    type: 1
})
</script>
<style scoped lang="scss">
.date-box {
    width: 100%;
}
.all-money{
    text-align: right;
}
</style>
